<!DOCTYPE html>
<html lang="en">
<head>
    <{include file="common/header.html"}>
</head>
<body>
    <!-- Preloader -->
    <div id="preloader">
        <div id="status"><i class="fa fa-spinner fa-spin"></i></div>
    </div>
    <section>
        <{include file="common/leftpanel.html"}>
        <!-- leftpanel -->
        <div class="mainpanel">
            <{include file="common/headerbar.html"}>
            <!-- headerbar -->
            <div class="pageheader">
                <h2><i class="fa fa-envelope"></i>首页<span>邮件</span><span>写邮件</span></h2>
                <div class="breadcrumb-wrapper">
                    <span class="label">在这里</span>
                    <ol class="breadcrumb">
                        <li><a href="https://www.adlinkx.com">返回</a></li>
                        <li class="active">首页</li>
                    </ol>
                </div>
            </div>
            <div class="contentpanel panel-email">
                <div class="row">
                    <div class="col-sm-3 col-lg-2">
                        <a href="/mail/compose" class="btn btn-danger btn-block btn-compose-email">写邮件</a>
                        <ul class="nav nav-pills nav-stacked nav-email">
                            <li class="active">
                                <a href="email.html">
                                    <span class="badge pull-right">2</span>
                                    <i class="glyphicon glyphicon-inbox"></i>收件箱
                                </a>
                            </li>
                            <li><a href="#"><i class="glyphicon glyphicon-star"></i>置顶邮件</a></li>
                            <li><a href="#"><i class="glyphicon glyphicon-send"></i>已发送的</a></li>
                            <li>
                                <a href="#">
                                    <span class="badge pull-right">3</span>
                                    <i class="glyphicon glyphicon-pencil"></i>草稿箱
                                </a>
                            </li>
                            <li><a href="#"><i class="glyphicon glyphicon-trash"></i>回收站</a></li>
                        </ul>
                        <div class="mb30"></div>
                        <h5 class="subtitle">文件夹</h5>
                        <ul class="nav nav-pills nav-stacked nav-email mb20">
                            <li>
                                <a href="email.html">
                                    <span class="badge pull-right">2</span>
                                    <i class="glyphicon glyphicon-folder-open"></i>会议邮箱
                                </a>
                            </li>
                            <li><a href="#"><i class="glyphicon glyphicon-folder-open"></i>通讯录</a></li>
                            <li><a href="#"><i class="glyphicon glyphicon-folder-open"></i>邀请函</a></li>
                            <li>
                                <a href="#">
                                    <i class="glyphicon glyphicon-folder-open"></i>促销邮件
                                </a>
                            </li>
                        </ul>
                    </div>
                    <!-- col-sm-3 -->
                    <div class="col-sm-9 col-lg-10">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <div class="form-group mb5">
                                    <select class="chosen-select" multiple data-placeholder="Recipients">
                                        <option value=""></option>
                                        <option value="Anna Fat">Anna Fat</option>
                                        <option value="Bilbo Bagens">Belbo Bagens</option>
                                        <option value="Catherine Zones">Catherine Zones</option>
                                        <option value="Daniel Powter">Danie Powter</option>
                                        <option value="Ellen Page">Ellen Page</option>
                                        <option value="Francis Yan">Francis Yan</option>
                                        <option value="Gerald Dom">Gerald Dom</option>
                                        <option value="Helder Carasbong">Helder Carasbong</option>
                                        <option value="Ian Page">Ian Page</option>
                                        <option value="John Doe">John Doe</option>
                                        <option value="Kik Wee">Kik Wee</option>
                                        <option value="Lance Arms">Lance Arms</option>
                                        <option value="Mike Tyson">Mike Tyson</option>
                                        <option value="Niel Strong">Niel Strong</option>
                                        <option value="Owen Wilson">Owen Wilson</option>
                                        <option value="Penelope Cruz">Penelope Cruz</option>
                                        <option value="Queen King">Queen King</option>
                                        <option value="Ralph Lamb">Ralph Lamb</option>
                                        <option value="Sansa Stark">Sansa Stark</option>
                                        <option value="Tyron Mike">Tyron Mike</option>
                                        <option value="Umber Heard">Umber Heard</option>
                                        <option value="Vanessa Hudgens">Vanessa Hudgens</option>
                                        <option value="William Jor">Willliam Jor</option>
                                        <option value="Xavier Saint">Xavier Saint</option>
                                        <option value="Yam Concept">Yam Concept</option>
                                        <option value="Zach Randolph">Zach Randolph</option>
                                    </select>
                                </div>
                                <div id="cc" class="form-group mb5" style="display: none">
                                    <select class="chosen-select" multiple data-placeholder="CC">
                                        <option value=""></option>
                                        <option value="Anna Fat">Anna Fat</option>
                                        <option value="Bilbo Bagens">Belbo Bagens</option>
                                        <option value="Catherine Zones">Catherine Zones</option>
                                        <option value="Daniel Powter">Danie Powter</option>
                                        <option value="Ellen Page">Ellen Page</option>
                                        <option value="Francis Yan">Francis Yan</option>
                                        <option value="Gerald Dom">Gerald Dom</option>
                                        <option value="Helder Carasbong">Helder Carasbong</option>
                                        <option value="Ian Page">Ian Page</option>
                                        <option value="John Doe">John Doe</option>
                                        <option value="Kik Wee">Kik Wee</option>
                                        <option value="Lance Arms">Lance Arms</option>
                                        <option value="Mike Tyson">Mike Tyson</option>
                                        <option value="Niel Strong">Niel Strong</option>
                                        <option value="Owen Wilson">Owen Wilson</option>
                                        <option value="Penelope Cruz">Penelope Cruz</option>
                                        <option value="Queen King">Queen King</option>
                                        <option value="Ralph Lamb">Ralph Lamb</option>
                                        <option value="Sansa Stark">Sansa Stark</option>
                                        <option value="Tyron Mike">Tyron Mike</option>
                                        <option value="Umber Heard">Umber Heard</option>
                                        <option value="Vanessa Hudgens">Vanessa Hudgens</option>
                                        <option value="William Jor">Willliam Jor</option>
                                        <option value="Xavier Saint">Xavier Saint</option>
                                        <option value="Yam Concept">Yam Concept</option>
                                        <option value="Zach Randolph">Zach Randolph</option>
                                    </select>
                                </div>
                                <div id="bcc" class="form-group mb5" style="display: none">
                                    <select class="chosen-select" multiple data-placeholder="BCC">
                                        <option value=""></option>
                                        <option value="Anna Fat">Anna Fat</option>
                                        <option value="Bilbo Bagens">Belbo Bagens</option>
                                        <option value="Catherine Zones">Catherine Zones</option>
                                        <option value="Daniel Powter">Danie Powter</option>
                                        <option value="Ellen Page">Ellen Page</option>
                                        <option value="Francis Yan">Francis Yan</option>
                                        <option value="Gerald Dom">Gerald Dom</option>
                                        <option value="Helder Carasbong">Helder Carasbong</option>
                                        <option value="Ian Page">Ian Page</option>
                                        <option value="John Doe">John Doe</option>
                                        <option value="Kik Wee">Kik Wee</option>
                                        <option value="Lance Arms">Lance Arms</option>
                                        <option value="Mike Tyson">Mike Tyson</option>
                                        <option value="Niel Strong">Niel Strong</option>
                                        <option value="Owen Wilson">Owen Wilson</option>
                                        <option value="Penelope Cruz">Penelope Cruz</option>
                                        <option value="Queen King">Queen King</option>
                                        <option value="Ralph Lamb">Ralph Lamb</option>
                                        <option value="Sansa Stark">Sansa Stark</option>
                                        <option value="Tyron Mike">Tyron Mike</option>
                                        <option value="Umber Heard">Umber Heard</option>
                                        <option value="Vanessa Hudgens">Vanessa Hudgens</option>
                                        <option value="William Jor">Willliam Jor</option>
                                        <option value="Xavier Saint">Xavier Saint</option>
                                        <option value="Yam Concept">Yam Concept</option>
                                        <option value="Zach Randolph">Zach Randolph</option>
                                    </select>
                                </div>
                                <a href="" id="acc" class="inblock mb5"><small>抄送</small></a> &nbsp; <a href="" class="inblock mb5" id="abcc"><small>密送</small></a>
                                <div class="form-group">
                                    <input type="text" name="subject" placeholder="Subject" class="form-control" />
                                </div>
                                <textarea id="wysiwyg" placeholder="Your message here..." class="form-control" rows="20"></textarea>
                            </div>
                            <!-- panel-body -->
                            <div class="panel-footer">
                                <button class="btn btn-primary"><i class="fa fa-paper-plane"></i> 发送</button>
                            </div>
                        </div>
                        <!-- panel -->
                    </div>
                    <!-- col-sm-9 -->
                </div>
                <!-- row -->
            </div>
            <{include file="common/footerbar.html"}>
        </div>
        <!-- mainpanel -->
        <div class="rightpanel">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs nav-justified">
                <li class="active"><a href="#rp-alluser" data-toggle="tab"><i class="fa fa-users"></i></a></li>
                <li><a href="#rp-favorites" data-toggle="tab"><i class="fa fa-heart"></i></a></li>
                <li><a href="#rp-history" data-toggle="tab"><i class="fa fa-clock-o"></i></a></li>
                <li><a href="#rp-settings" data-toggle="tab"><i class="fa fa-gear"></i></a></li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
                <div class="tab-pane active" id="rp-alluser">
                    <h5 class="sidebartitle">Online Users</h5>
                    <ul class="chatuserlist">
                        <li class="online">
                            <div class="media">
                                <a href="#" class="pull-left media-thumb">
                                    <img alt="" src="/resources/images/photos/userprofile.png" class="media-object">
                                </a>
                                <div class="media-body">
                                    <strong>Eileen Sideways</strong>
                                    <small>Los Angeles, CA</small>
                                </div>
                            </div>
                            <!-- media -->
                        </li>
                        <li class="online">
                            <div class="media">
                                <a href="#" class="pull-left media-thumb">
                                    <img alt="" src="/resources/images/photos/user1.png" class="media-object">
                                </a>
                                <div class="media-body">
                                    <span class="pull-right badge badge-danger">2</span>
                                    <strong>Zaham Sindilmaca</strong>
                                    <small>San Francisco, CA</small>
                                </div>
                            </div>
                            <!-- media -->
                        </li>
                        <li class="online">
                            <div class="media">
                                <a href="#" class="pull-left media-thumb">
                                    <img alt="" src="/resources/images/photos/user2.png" class="media-object">
                                </a>
                                <div class="media-body">
                                    <strong>Nusja Nawancali</strong>
                                    <small>Bangkok, Thailand</small>
                                </div>
                            </div>
                            <!-- media -->
                        </li>
                        <li class="online">
                            <div class="media">
                                <a href="#" class="pull-left media-thumb">
                                    <img alt="" src="/resources/images/photos/user3.png" class="media-object">
                                </a>
                                <div class="media-body">
                                    <strong>Renov Leongal</strong>
                                    <small>Cebu City, Philippines</small>
                                </div>
                            </div>
                            <!-- media -->
                        </li>
                        <li class="online">
                            <div class="media">
                                <a href="#" class="pull-left media-thumb">
                                    <img alt="" src="/resources/images/photos/user4.png" class="media-object">
                                </a>
                                <div class="media-body">
                                    <strong>Weno Carasbong</strong>
                                    <small>Tokyo, Japan</small>
                                </div>
                            </div>
                            <!-- media -->
                        </li>
                    </ul>
                    <div class="mb30"></div>
                    <h5 class="sidebartitle">Offline Users</h5>
                    <ul class="chatuserlist">
                        <li>
                            <div class="media">
                                <a href="#" class="pull-left media-thumb">
                                    <img alt="" src="/resources/images/photos/user5.png" class="media-object">
                                </a>
                                <div class="media-body">
                                    <strong>Eileen Sideways</strong>
                                    <small>Los Angeles, CA</small>
                                </div>
                            </div>
                            <!-- media -->
                        </li>
                        <li>
                            <div class="media">
                                <a href="#" class="pull-left media-thumb">
                                    <img alt="" src="/resources/images/photos/user2.png" class="media-object">
                                </a>
                                <div class="media-body">
                                    <strong>Zaham Sindilmaca</strong>
                                    <small>San Francisco, CA</small>
                                </div>
                            </div>
                            <!-- media -->
                        </li>
                        <li>
                            <div class="media">
                                <a href="#" class="pull-left media-thumb">
                                    <img alt="" src="/resources/images/photos/user3.png" class="media-object">
                                </a>
                                <div class="media-body">
                                    <strong>Nusja Nawancali</strong>
                                    <small>Bangkok, Thailand</small>
                                </div>
                            </div>
                            <!-- media -->
                        </li>
                        <li>
                            <div class="media">
                                <a href="#" class="pull-left media-thumb">
                                    <img alt="" src="/resources/images/photos/user4.png" class="media-object">
                                </a>
                                <div class="media-body">
                                    <strong>Renov Leongal</strong>
                                    <small>Cebu City, Philippines</small>
                                </div>
                            </div>
                            <!-- media -->
                        </li>
                        <li>
                            <div class="media">
                                <a href="#" class="pull-left media-thumb">
                                    <img alt="" src="/resources/images/photos/user5.png" class="media-object">
                                </a>
                                <div class="media-body">
                                    <strong>Weno Carasbong</strong>
                                    <small>Tokyo, Japan</small>
                                </div>
                            </div>
                            <!-- media -->
                        </li>
                        <li>
                            <div class="media">
                                <a href="#" class="pull-left media-thumb">
                                    <img alt="" src="/resources/images/photos/user4.png" class="media-object">
                                </a>
                                <div class="media-body">
                                    <strong>Renov Leongal</strong>
                                    <small>Cebu City, Philippines</small>
                                </div>
                            </div>
                            <!-- media -->
                        </li>
                        <li>
                            <div class="media">
                                <a href="#" class="pull-left media-thumb">
                                    <img alt="" src="/resources/images/photos/user5.png" class="media-object">
                                </a>
                                <div class="media-body">
                                    <strong>Weno Carasbong</strong>
                                    <small>Tokyo, Japan</small>
                                </div>
                            </div>
                            <!-- media -->
                        </li>
                    </ul>
                </div>
                <div class="tab-pane" id="rp-favorites">
                    <h5 class="sidebartitle">Favorites</h5>
                    <ul class="chatuserlist">
                        <li class="online">
                            <div class="media">
                                <a href="#" class="pull-left media-thumb">
                                    <img alt="" src="/resources/images/photos/user2.png" class="media-object">
                                </a>
                                <div class="media-body">
                                    <strong>Eileen Sideways</strong>
                                    <small>Los Angeles, CA</small>
                                </div>
                            </div>
                            <!-- media -->
                        </li>
                        <li>
                            <div class="media">
                                <a href="#" class="pull-left media-thumb">
                                    <img alt="" src="/resources/images/photos/user1.png" class="media-object">
                                </a>
                                <div class="media-body">
                                    <strong>Zaham Sindilmaca</strong>
                                    <small>San Francisco, CA</small>
                                </div>
                            </div>
                            <!-- media -->
                        </li>
                        <li>
                            <div class="media">
                                <a href="#" class="pull-left media-thumb">
                                    <img alt="" src="/resources/images/photos/user3.png" class="media-object">
                                </a>
                                <div class="media-body">
                                    <strong>Nusja Nawancali</strong>
                                    <small>Bangkok, Thailand</small>
                                </div>
                            </div>
                            <!-- media -->
                        </li>
                        <li class="online">
                            <div class="media">
                                <a href="#" class="pull-left media-thumb">
                                    <img alt="" src="/resources/images/photos/user4.png" class="media-object">
                                </a>
                                <div class="media-body">
                                    <strong>Renov Leongal</strong>
                                    <small>Cebu City, Philippines</small>
                                </div>
                            </div>
                            <!-- media -->
                        </li>
                        <li class="online">
                            <div class="media">
                                <a href="#" class="pull-left media-thumb">
                                    <img alt="" src="/resources/images/photos/user5.png" class="media-object">
                                </a>
                                <div class="media-body">
                                    <strong>Weno Carasbong</strong>
                                    <small>Tokyo, Japan</small>
                                </div>
                            </div>
                            <!-- media -->
                        </li>
                    </ul>
                </div>
                <div class="tab-pane" id="rp-history">
                    <h5 class="sidebartitle">History</h5>
                    <ul class="chatuserlist">
                        <li class="online">
                            <div class="media">
                                <a href="#" class="pull-left media-thumb">
                                    <img alt="" src="/resources/images/photos/user4.png" class="media-object">
                                </a>
                                <div class="media-body">
                                    <strong>Eileen Sideways</strong>
                                    <small>Hi hello, ctc?... would you mind if I go to your...</small>
                                </div>
                            </div>
                            <!-- media -->
                        </li>
                        <li>
                            <div class="media">
                                <a href="#" class="pull-left media-thumb">
                                    <img alt="" src="/resources/images/photos/user2.png" class="media-object">
                                </a>
                                <div class="media-body">
                                    <strong>Zaham Sindilmaca</strong>
                                    <small>This is to inform you that your product that we...</small>
                                </div>
                            </div>
                            <!-- media -->
                        </li>
                        <li>
                            <div class="media">
                                <a href="#" class="pull-left media-thumb">
                                    <img alt="" src="/resources/images/photos/user3.png" class="media-object">
                                </a>
                                <div class="media-body">
                                    <strong>Nusja Nawancali</strong>
                                    <small>Are you willing to have a long term relat...</small>
                                </div>
                            </div>
                            <!-- media -->
                        </li>
                    </ul>
                </div>
                <div class="tab-pane pane-settings" id="rp-settings">
                    <h5 class="sidebartitle mb20">Settings</h5>
                    <div class="form-group">
                        <label class="col-xs-8 control-label">Show Offline Users</label>
                        <div class="col-xs-4 control-label">
                            <div class="toggle toggle-success"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-8 control-label">Enable History</label>
                        <div class="col-xs-4 control-label">
                            <div class="toggle toggle-success"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-8 control-label">Show Full Name</label>
                        <div class="col-xs-4 control-label">
                            <div class="toggle-chat1 toggle-success"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-8 control-label">Show Location</label>
                        <div class="col-xs-4 control-label">
                            <div class="toggle toggle-success"></div>
                        </div>
                    </div>
                </div>
                <!-- tab-pane -->
            </div>
            <!-- tab-content -->
        </div>
        <!-- rightpanel -->
    </section>
    <script src="/resources/js/libarays/jquery-1.11.1.min.js"></script>
    <script src="/resources/js/libarays/jquery-migrate-1.2.1.min.js"></script>
    <script src="/resources/js/libarays/bootstrap.min.js"></script>
    <script src="/resources/js/libarays/modernizr.min.js"></script>
    <script src="/resources/js/libarays/jquery.sparkline.min.js"></script>
    <script src="/resources/js/libarays/toggles.min.js"></script>
    <script src="/resources/js/libarays/retina.min.js"></script>
    <script src="/resources/js/libarays/jquery.cookies.js"></script>
    <script src="/resources/js/libarays/custom.js"></script>
</body>

</html>
